<ion-header>
  <ion-navbar>
    <ion-title>{{headTitle}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content (ionScroll)="loaderMore($event)">
  <section class="sort_container">
    <div class="sort_item" [ngClass]="{'choose_type':sortBy == 'food'}">
      <div class="sort_item_container" (click)="chooseType('food')">
        <div class="sort_item_border">
          <span [ngClass]="{'category_title': sortBy == 'food'}">{{foodTitle}}</span>
          <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
            <polygon points="0,3 10,3 5,8" />
          </svg>
        </div>
      </div>
      <div name="showlist" [hidden]="!category">
        <section [hidden]="!(sortBy== 'food')" class="category_container sort_detail_type">
          <section class="category_left">
            <ul>
              <li *ngFor="let item of category; index as index" class="category_left_li" [ngClass]="{'category_active':restaurantCategoryId == item.id}"
                (click)="selectCategoryName(item.id, index)">
                <section>
                  <img [src]="getImgPath(item.image_url)" *ngIf="index" class="category_icon">
                  <span>{{item.name}}</span>
                </section>
                <section>
                  <span class="category_count">{{item.count}}</span>
                  <svg *ngIf="index" width="8" height="8" xmlns="http://www.w3.org/2000/svg" version="1.1" class="category_arrow">
                    <path d="M0 0 L6 4 L0 8" stroke="#bbb" stroke-width="1" fill="none" />
                  </svg>
                </section>
              </li>
            </ul>
          </section>
          <section class="category_right">
            <ul>
              <ng-container *ngFor="let item of categoryDetail;index as index">
                <li *ngIf="index" class="category_right_li" (click)="getCategoryIds(item.id, item.name)" [ngClass]="{'category_right_choosed': restaurantCategoryIds == item.id || (!restaurantCategoryIds)&&index == 0}">
                  <span>{{item.name}}</span>
                  <span>{{item.count}}</span>
                </li>
              </ng-container>
            </ul>
          </section>
        </section>
      </div>
    </div>
    <div class="sort_item" [ngClass]="{'choose_type':sortBy == 'sort'}">
      <div class="sort_item_container" (click)="chooseType('sort')">
        <div class="sort_item_border">
          <span [ngClass]="{'category_title': sortBy == 'sort'}">排序</span>
          <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
            <polygon points="0,3 10,3 5,8" />
          </svg>
        </div>
      </div>
      <div name="showlist">
        <section [hidden]="!(sortBy == 'sort')" class="sort_detail_type">
          <ul class="sort_list_container" (click)="sortList($event)">
            <li class="sort_list_li">
              <svg>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#default"></use>
              </svg>
              <p data="0" [ngClass]="{'sort_select': sortByType == 0}">
                <span>智能排序</span>
                <svg *ngIf="sortByType == 0">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                </svg>
              </p>
            </li>
            <li class="sort_list_li">
              <svg>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#distance"></use>
              </svg>
              <p data="5" [ngClass]="{'sort_select': sortByType == 5}">
                <span>距离最近</span>
                <svg *ngIf="sortByType == 5">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                </svg>
              </p>
            </li>
            <li class="sort_list_li">
              <svg>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#hot"></use>
              </svg>
              <p data="6" [ngClass]="{'sort_select': sortByType == 6}">
                <span>销量最高</span>
                <svg *ngIf="sortByType == 6">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                </svg>
              </p>
            </li>
            <li class="sort_list_li">
              <svg>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#price"></use>
              </svg>
              <p data="1" [ngClass]="{'sort_select': sortByType == 1}">
                <span>起送价最低</span>
                <svg *ngIf="sortByType == 1">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                </svg>
              </p>
            </li>
            <li class="sort_list_li">
              <svg>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#speed"></use>
              </svg>
              <p data="2" [ngClass]="{'sort_select': sortByType == 2}">
                <span>配送速度最快</span>
                <svg *ngIf="sortByType == 2">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                </svg>
              </p>
            </li>
            <li class="sort_list_li">
              <svg>
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating"></use>
              </svg>
              <p data="3" [ngClass]="{'sort_select': sortByType == 3}">
                <span>评分最高</span>
                <svg *ngIf="sortByType == 3">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                </svg>
              </p>
            </li>
          </ul>
        </section>
      </div>
    </div>
    <div class="sort_item" [ngClass]="{'choose_type':sortBy == 'activity'}">
      <div class="sort_item_container" (click)="chooseType('activity')">
        <span [ngClass]="{'category_title': sortBy == 'activity'}">筛选</span>
        <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
          <polygon points="0,3 10,3 5,8" />
        </svg>
      </div>
      <div name="showlist">
        <section [hidden]="!(sortBy == 'activity')" class="sort_detail_type filter_container">
          <section style="width: 100%;">
            <header class="filter_header_style">配送方式</header>
            <ul class="filter_ul">
              <li *ngFor="let item of Delivery" class="filter_li" (click)="selectDeliveryMode(item.id)">
                <svg [ngStyle]="{opacity: (item.id == 0)&&(deliveryMode !== 0)? 0: 1}">
                  <ng-container *ngIf="deliveryMode == item.id">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                  </ng-container>
                  <ng-container *ngIf="deliveryMode != item.id">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fengniao"></use>
                  </ng-container>
                </svg>
                <span [ngClass]="{'selected_filter': deliveryMode == item.id}">{{item.text}}</span>
              </li>
            </ul>
          </section>
          <section style="width: 100%;">
            <header class="filter_header_style">商家属性（可以多选）</header>
            <ul class="filter_ul">
              <li *ngFor="let item of Activity;index as index" class="filter_li" (click)="selectSupportIds(index, item.id)">
                <svg [ngClass]="{'displayNone': !supportIds[index].status}" class="activity_svg">
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#selected"></use>
                </svg>
                <span class="filter_icon" [ngStyle]="{color: '#' + item.icon_color, borderColor: '#' + item.icon_color}" [hidden]="supportIds[index].status">{{item.icon_name}}</span>
                <span [ngClass]="{'selected_filter': supportIds[index].status}">{{item.name}}</span>
              </li>
            </ul>
          </section>
          <footer class="confirm_filter">
            <div class="clear_all filter_button_style" (click)="clearSelect()">清空</div>
            <div class="confirm_select filter_button_style" (click)="getShopList();sortBy='';">确定<span [hidden]="!filterNum">({{filterNum}})</span></div>
          </footer>
        </section>
      </div>
    </div>
  </section>
  <div class="back_cover" [hidden]="!sortBy"></div>
  <div class="shop_list_container">
    <shop-list *ngIf="latitude" [type]="'msite'" [shopList]="shopList" [geohash]="geohash"></shop-list>
    <p *ngIf="touchend" class="empty_data">没有更多了</p>
    <loading [hidden]="!showLoading"></loading>
  </div>
</ion-content>